<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:ry="">
    <head>
        <th:block th:include="include :: header('自定义下拉框')" />
        <th:block th:include="include :: select2-css" />
        <th:block th:include="include :: bootstrap-select-css" />
    </head>
    <body class="gray-bg">
    <form>
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>自定义下拉框&nbsp;&nbsp;<small>根据传入list加载</small></h5>
                        </div>
                        <div class="ibox-content">
                            <div class="form-group">
                                <label class="font-noraml">普通单选：</label>
                                <ry:select class="form-control" th:list="${posts}" itemLabel="post_name" itemValue="post_id"
                                           headLabel="请选择岗位..." headValue=""/>
                            </div>
                            <div class="form-group">
                                <label class="font-noraml">下拉单选(select2)：</label>
                                <ry:select class="form-control select2-multiple" th:list="${posts}"
                                           itemLabel="post_name" itemValue="post_id" headLabel="请选择岗位..." headValue=""/>
                            </div>
                            <div class="form-group">
                                <label class="font-noraml">下拉单选(select2)回显：</label>
                                <ry:select class="form-control select2-multiple" th:list="${posts}"
                                           itemLabel="post_name" itemValue="post_id" headLabel="请选择岗位..." headValue="" value="3"/>
                            </div>
                            <div class="form-group">
                                <label class="font-noraml">下拉多选(select2)：</label>
                                <ry:select id="post1" class="form-control select2-multiple" th:list="${posts}"
                                           itemLabel="post_name" itemValue="post_id" multiple/>
                            </div>
                            <div class="form-group">
                                <label class="font-noraml">下拉多选(select2)回显：</label>
                                <ry:select id="post2" class="form-control select2-multiple" th:list="${posts}"
                                           itemLabel="post_name" itemValue="post_id" multiple value="2,4" delims=","/>
                            </div>
                            <div class="form-group">
                                <label class="font-noraml">下拉单选(bootstrap-select)：</label>
                                <ry:select class="form-control noselect2 selectpicker" th:list="${posts}"
                                           data-live-search="true" itemLabel="post_name" itemValue="post_id" headLabel="请选择岗位..." headValue=""/>
                            </div>
                            <div class="form-group">
                                <label class="font-noraml">下拉单选(bootstrap-select)回显：</label>
                                <ry:select class="form-control noselect2 selectpicker" th:list="${posts}"
                                           data-live-search="true" itemLabel="post_name" itemValue="post_id" headLabel="请选择岗位..." headValue="" value="3"/>
                            </div>
                            <div class="form-group">
                                <label class="font-noraml">下拉多选(bootstrap-select)：</label>
                                <ry:select class="form-control noselect2 selectpicker" th:list="${posts}"
                                           data-none-selected-text="请选择岗位..." data-live-search="true" data-actions-box="true"
                                           itemLabel="post_name" itemValue="post_id" multiple/>
                            </div>
                            <div class="form-group">
                                <label class="font-noraml">下拉多选(bootstrap-select)回显：</label>
                                <ry:select class="form-control noselect2 selectpicker" th:list="${posts}"
                                           data-none-selected-text="请选择岗位..." data-live-search="true" data-actions-box="true"
                                           itemLabel="post_name" itemValue="post_id" multiple value="2,4" delims=","/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>自定义下拉框&nbsp;&nbsp;<small>根据字典加载</small></h5>
                        </div>
                        <div class="ibox-content">
                            <div class="form-group">
                                <label class="font-noraml">普通单选：</label>
                                <ry:selectDict class="form-control" dictType="sys_common_status" headLabel="请选择..." headValue=""/>
                            </div>
                            <div class="form-group">
                                <label class="font-noraml">下拉单选(select2)：</label>
                                <ry:selectDict class="form-control select2-multiple" dictType="sys_common_status" headLabel="请选择..." headValue=""/>
                            </div>
                            <div class="form-group">
                                <label class="font-noraml">下拉单选(select2)回显：</label>
                                <ry:selectDict class="form-control select2-multiple" dictType="sys_common_status" headLabel="请选择..." headValue="" value="1"/>
                            </div>
                            <div class="form-group">
                                <label class="font-noraml">下拉多选(select2)：</label>
                                <ry:selectDict id="post3" class="form-control select2-multiple" dictType="sys_common_status" multiple/>
                            </div>
                            <div class="form-group">
                                <label class="font-noraml">下拉多选(select2)回显：</label>
                                <ry:selectDict id="post4" class="form-control select2-multiple" dictType="sys_common_status"
                                               value="1,0" delims="," multiple/>
                            </div>
                            <div class="form-group">
                                <label class="font-noraml">下拉单选(bootstrap-select)：</label>
                                <ry:selectDict class="form-control noselect2 selectpicker" dictType="sys_common_status"
                                               data-live-search="true" headLabel="请选择..." headValue=""/>
                            </div>
                            <div class="form-group">
                                <label class="font-noraml">下拉单选(bootstrap-select)回显：</label>
                                <ry:selectDict class="form-control noselect2 selectpicker" dictType="sys_common_status"
                                               data-live-search="true" headLabel="请选择..." headValue="" value="1"/>
                            </div>
                            <div class="form-group">
                                <label class="font-noraml">下拉多选(bootstrap-select)：</label>
                                <ry:selectDict class="form-control noselect2 selectpicker" dictType="sys_common_status"
                                               data-none-selected-text="请选择..." data-live-search="true" data-actions-box="true" multiple/>
                            </div>
                            <div class="form-group">
                                <label class="font-noraml">下拉多选(bootstrap-select)回显：</label>
                                <ry:selectDict class="form-control noselect2 selectpicker" dictType="sys_common_status"
                                               data-none-selected-text="请选择..." data-live-search="true" data-actions-box="true"
                                               value="1,0" delims="," multiple/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: select2-js" />
    <th:block th:include="include :: bootstrap-select-js" />
    <script>
        $(function() {
            $('#post1').select2({
                placeholder:"请选择岗位...",
                allowClear: true
            });
            $('#post2').select2({
                placeholder:"请选择岗位...",
                allowClear: true
            });
            $('#post3').select2({
                placeholder:"请选择...",
                allowClear: true
            });
            $('#post4').select2({
                placeholder:"请选择...",
                allowClear: true
            });
        })
    </script>
    </body>
</html>
